<template>
	<view>
		<Navbar></Navbar>
		<view class="u-flex u-row-between header u-m-t-20">
			<view class="u-font-34">{{ getStatusName(orderData.order_status) }}</view>
			<view class="u-flex" v-if="[1].includes(orderData.order_status)">
				<view class="u-font-24 u-m-l-5">剩余时间：</view>
				<u-count-down :timestamp="orderData.diffTime" color="#fff" separator-color="#fff" bg-color="transparent"
					font-size="28"></u-count-down>
			</view>
		</view>
		<view class="u-m-20">
			<view class="u-p-t-30 u-p-b-30 u-m-t-20 u-form-box u-flex u-col-top">
				<u-icon name="map" size="34"></u-icon>
				<view class="u-m-l-20">
					<view>{{ orderData.send_info }}</view>
					<view class="u-m-t-20">
						<span>收货地址：</span>
						<span>{{ orderData.address_shot }}</span>
					</view>
				</view>
			</view>
			<view class="u-p-t-10 u-p-b-30 u-m-t-20 u-form-box">
				<view class="goods" v-for="goodsItem in orderData.goods_json" :key="goodsItem.goods_id">
					<view class="u-flex u-col-top">
						<image :src="goodsItem.goods.head_image[0]"></image>
						<view class="u-m-l-20">
							<view class="u-font-28 u-font-bold">{{goodsItem.goods.name}}</view>
							<view class="u-m-t-15" v-if="orderData.is_use == 0">
								<span class="u-font-bold u-font-24 u-color-red">¥</span>
								<span class="u-font-bold u-font-36 u-color-red">{{goodsItem.goods.vip_price}}</span>
							</view>
							<view class="u-m-t-15" v-else>
								<span class="u-font-bold u-font-36 u-color-red">{{goodsItem.goods.proportion_vip_price}}积分</span>
							</view>
						</view>
					</view>
					<view class="u-m-t-10 u-color-gray">x{{goodsItem.num}}</view>
				</view>
			</view>
			<view class="u-p-t-30 u-p-t-b-40 u-m-t-20 u-form-box">
				<view class="u-flex u-m-b-20" v-if="orderData.express_company_info">
					<view>快递公司：</view>
					<view>{{ orderData.express_company_info }}</view>
				</view>
				<view class="u-flex u-m-b-20" v-if="orderData.express_sn">
					<view>快递单号：</view>
					<view>
						<span>{{ orderData.express_sn }}</span>
						<span class="copy" @click="onCopy">复制</span>
					</view>
				</view>
				<view class="u-flex u-m-b-20">
					<view>创建时间：</view>
					<view>{{ orderData.create_time }}</view>
				</view>
				<view>
					<button open-type="contact" class="custom">
						<u-icon name="more-circle"></u-icon>
						<view class="u-m-l-10">联系客服</view>
					</button>
				</view>
			</view>
			<view class="u-p-t-30 u-p-t-b-40 u-m-t-20 u-form-box">
				<view class="u-flex u-row-between">
					<view>商品金额</view>
					<view v-if="orderData.is_use == 0">¥{{ orderData.price }}</view>
					<view v-else>{{ orderData.price }}积分</view>
				</view>
				<!-- <view class="u-m-t-20 u-flex u-row-between">
					<view>积分抵扣</view>
					<view class="u-m-l-20 u-flex u-row-right u-flex-1 u-color-red">{{ orderData.number }}</view>
				</view> -->
				<view class="u-m-t-20 u-p-b-40 u-flex u-row-right">
					<view>实付金额：</view>
					<view class="u-color-red" v-if="orderData.is_use == 0">¥{{ orderData.pay_price }}</view>
					<view class="u-color-red" v-else>{{ orderData.price }}积分</view>
				</view>
				<view class="u-m-t-20 u-p-b-40 u-flex u-row-between" v-if="orderData.user_remark">
					<view>订单备注：</view>
					<view class="u-m-l-20 u-flex u-row-right u-flex-1">{{ orderData.user_remark }}</view>
				</view>
			</view>
			<view class="u-flex u-row-right u-m-t-20">
				<view class="u-flex" v-if="[1].includes(orderData.order_status)">
					<view class="confirm u-m-r-30" @click.native.stop="onOperate(1)">关闭订单</view>
					<view class="cancel" @click.native.stop="onOperate(2)">支付</view>
				</view>
				<view class="u-flex" v-if="[3].includes(orderData.order_status)">
					<view class="confirm" @click.native.stop="onOperate(3)">确认收货</view>
				</view>
				<view class="u-flex u-m-l-20" v-if="[2,3].includes(orderData.order_status)">
					<view class="cancel" @click.native.stop="onOperate(4)">{{ orderData.apply_name }}</view>
				</view>
			</view>
		</view>

		<!-- 通用提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirm" :cancelText="modal.cancel" :modalContent="modal.content"
			:showCancel="modal.showCancel" @confirm="modalConfirm" @cancel="modal.show = false"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Modal from '@/components/Modal.vue'
	import { teaOrderConfirm, teaOrderCancel, teaOrderPay, teaOrderDetail, teaRefuseOrder } from '@/network/tea.js'
	export default {
		components: {
			Navbar,
			Modal
		},
		data() {
			return {
				orderId: 0,
				orderData:{},
				modal: {
					show: false,
					showCancel: true,
					confirm: '申请',
					cancel: '取消',
					content: '',
					id: 0, // 订单id
					type: 1
				}
			}
		},
		onLoad(options){
			this.orderId = options.id
			this.onGetOrderDetail()
		},
		methods: {
			async onGetOrderDetail(){
				const res = await teaOrderDetail({order_id: this.orderId})
				switch(res.data.apply_refund){
					case 0:
					    res.data.apply_name = '申请退款'
						break;
					case 1:
					    res.data.apply_name = '审核中'
						break;
					case 2:
					    res.data.apply_name = '已退款'
						break;
					case 3:
					    res.data.apply_name = '退款失败，重新申请'
						break;
				}
				if(res.data.order_status == 1){
					res.data.diffTime = (new Date(res.data.due_time) - new Date()) / 1000
				}
				res.data.goods_json.map(goodsItem=>{
					goodsItem.goods.head_image = goodsItem.goods.head_image.split(',')
				})
				this.orderData = res.data
			},
			getStatusName(val){
				let typeName = ''
				switch (val) {
					case 1:
						typeName = '待付款'
						break;
					case 2:
						typeName = '待发货'
						break;
					case 3:
						typeName = '待收货'
						break;
					case 4:
						typeName = '已完成'
						break;
					case 5:
						typeName = '已退款'
						break;
					case 6:
						typeName = '已取消'
						break;
				}
				return typeName
			},
			onCopy() {
				uni.setClipboardData({
					data: `${this.orderData.express_sn}`,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: "none"
						})
					}
				})
			},
			onOperate(type) {
				this.modal.id = this.orderData.id
				this.modal.type = type
				switch (type) {
					// 关闭订单
					case 1:
						this.modal.content = '是否确认取消订单'
						break;
					// 支付
					case 2:
					    this.modal.content = '是否支付该订单'
						break;
					// 确认发货
					case 3:
						this.modal.content = '是否确认收货'
						break;
					// 退款
					case 4:
					    if([0,3].includes(this.orderData.apply_refund)){
							this.modal.content = '是否确认申请退款'
						}else{
							this.modal.content = '退款审核中，请勿重复申请'
							this.modal.type = 5
						}
						break;
				}
				this.modal.confirm = '确定'
				this.modal.show = true
			},
			async modalConfirm(){
				switch(this.modal.type){
					// 关闭订单
					case 1:
						await teaOrderCancel({order_id: this.modal.id})
						this.onGetOrderDetail()
						this.modal.show = false
					    break;
					// 支付
					case 2:
						const res = await teaOrderPay({order_id: this.modal.id})
						await uni.requestPayment({
							provider: "wxpay",
							appId: res.data.order_str.appId,
							timeStamp: res.data.order_str.timeStamp,
							nonceStr: res.data.order_str.nonceStr,
							package: res.data.order_str.package,
							signType: res.data.order_str.signType,
							paySign: res.data.order_str.paySign,
							success() {
								uni.hideLoading()
								_this.onGetOrderDetail()
								_this.modal.show = false
							},
							fail(err) {
								uni.hideLoading()
								uni.showLoading({
									title: err,
								})
							},
							complete() {
								uni.hideLoading()
							}
						})
					    break;
					// 确认发货
					case 3:
						await teaOrderConfirm({order_id: this.modal.id})
						this.onGetOrderDetail()
						this.modal.show = false
					    break;
					// 退款
					case 4:
					    await teaRefuseOrder({order_id: this.modal.id})
						this.onGetOrderDetail()
						this.modal.show = false
						break;
					// 退款审核中
					case 5:
					    this.modal.show = false
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: #CFAF70;
		padding: 40rpx;
		color: #fff;
	}

	.goods {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}
	}

	.custom {
		font-size: 28rpx;
		margin-top: 80rpx;
		border-top: 1rpx solid #ccc;
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		line-height: 1;
		background: none;
		border-radius: inherit;
	}

	wx-button::after {
		border: none
	}

	.copy {
		font-size: 20rpx;
		border: 1rpx solid #ccc;
		padding: 5rpx 10rpx;
		border-radius: 20rpx;
		background: #F7F7F7;
		margin-left: 10rpx;
	}

	.confirm {
		background: #B3723E;
		color: #fff;
		padding: 15rpx 30rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.cancel {
		background: #000;
		color: #fff;
		padding: 15rpx 30rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
</style>